<template>
  <div class="featured">
    <div class="featured-header">
      <div class="title">{{ datas.title }}</div>
      <div class="desc">{{ datas.desc }}</div>
    </div>
    <div class="featured-body">
      <el-form :model="datas.form" size="small" label-width="68px">
        <!-- 数据来源选择 -->
        <el-form-item label="数据来源">
          <el-radio-group v-model="datas.form.source" @change="handlerChangeSource">
            <el-radio
              v-for="item in options"
              :key="item.label"
              :label="item.label"
            >
              {{ item.title }}
            </el-radio>
          </el-radio-group>
          <div v-show="datas.form.source === 1" class="edu-tips">全部分类将展示所有课程分类</div>
        </el-form-item>

        <!-- 自定义分类 -->
        <el-form-item v-if="datas.form.source == 0" label="选择分类">
          <el-cascader
            ref="category"
            v-model="category"
            :options="categoryOptions"
            :props="{ checkStrictly: true }"
            @change="handlerChangeCategory"
          ></el-cascader>
        </el-form-item>

        <el-form-item v-if="datas.form.source === 0" label="广告位">
          <!--<div class="advert-item__header">-->
          <!--  <div class="img-uploader" @click="chooseImage">-->
          <!--    <div v-if="datas.form.advert_url" class="img-uploader-card">-->
          <!--      <el-image :src="datas.form.advert_url" class="img-uploader-img"></el-image>-->
          <!--      <div class="img-uploader-btn">重新上传</div>-->
          <!--    </div>-->
          <!--    <div v-else class="img-uploader-card">-->
          <!--      <i class="el-icon-plus img-uploader-icon"></i>-->
          <!--      <div class="img-uploader-text">上传图片</div>-->
          <!--    </div>-->
          <!--  </div>-->
          <!--  <el-radio-group v-model="datas.form.advert_type">-->
          <!--    <el-radio-->
          <!--      v-for="radio in list"-->
          <!--      :key="radio.label"-->
          <!--      :label="radio.label"-->
          <!--    >-->
          <!--      {{ radio.title }}-->
          <!--    </el-radio>-->
          <!--  </el-radio-group>-->
          <!--</div>-->
          <div class="advert-item__course">
            <div class="course-add">
              <!--<span class="text">绑定课程</span>-->
              <el-button type="primary" size="mini" @click="chooseCourse">
                {{ datas.form.advert_course_id > 0 ? '重新选择' : '选择课程' }}
              </el-button>
            </div>
            <div v-if="datas.form.advert_course_id > 0" class="course-del">
              <span class="text">已选课程：{{ datas.form.advert_course_title }}</span>
              <!--<i class="el-icon-close close"></i>-->
            </div>
          </div>
          <!--<div v-else-if="datas.form.advert_type == 2" class="advert-item__href">-->
          <!--  <div class="text">输入地址</div>-->
          <!--  <el-input-->
          <!--    v-model="datas.form.advert_href"-->
          <!--    placeholder="请输入地址"-->
          <!--    size="small"-->
          <!--  ></el-input>-->
          <!--</div>-->
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择课程 start-->
    <choose-course-dialog
      v-if="chooseCourseVisible"
      :visible.sync="chooseCourseVisible"
      :limit="1"
      :list="attachList"
      from="config"
      @submit="setCurrentItemCourse"
    ></choose-course-dialog>
    <!-- 选择课程 end-->
    <!--&lt;!&ndash; 选择图片 start &ndash;&gt;-->
    <!--<choose-image-->
    <!--  v-if="chooseImageVisible"-->
    <!--  :value.sync="datas.form.advert_icon_id"-->
    <!--  field="icon_id"-->
    <!--  :form-datas="datas.form"-->
    <!--  :view="false"-->
    <!--  @close="closeChooseImage"-->
    <!--  @changeAttach="setCurrentItemAttach"-->
    <!--&gt;</choose-image>-->
    <!--&lt;!&ndash; 选择图片 end &ndash;&gt;-->
  </div>
</template>

<script>
import ChooseCourseDialog from '@/pages/course/components/ChooseCourseDialog'
// import ChooseImage from '@/pages/material/choose/image.vue';

export default {
  name: 'FeaturedStyle',
  components: {
    ChooseCourseDialog
    // ChooseImage
  },
  props: {
    datas: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      options: [
        {
          label: 1,
          title: '全部分类'
        },
        {
          label: 0,
          title: '自定义'
        }
      ],
      list: [
        {
          label: 1,
          title: '站内链接'
        },
        {
          label: 2,
          title: '自定义链接'
        }
      ],
      chooseCourseVisible: false,
      // chooseImageVisible: false,
      categoryOptions: [],
      category: this.datas.form.category ? this.datas.form.category : ''
    }
  },
  computed: {
    attachList() {
      let courseList = []
      if (this.datas.form.advert_course_id) {
        courseList = [
          {
            title: this.datas.form.advert_course_title,
            value: this.datas.form.advert_course_id
          }
        ]
      }

      return courseList
    }
  },
  created() {
    this.getCategoryCascader()
  },
  methods: {
    // 获取分类树形结构
    getCategoryCascader() {
      this.$http.get(
          '/course/admin/category/cascader',
          {},
          ({ data }) => {
            this.categoryOptions = this.handlerCategoryOptions(data)
            if (this.datas.form.source === 1) {
              this.setSourceIndex()
            }

            // this.category = Array.isArray(this.datas.form.source_list) && this.datas.form.source_list.length > 0 ? this.datas.form.source_list[0].value : ''
          },
          _ => {
          },
          false
      );
    },
    handlerChangeCategory() {
      this.$set(this.datas.form, 'category', this.category)
      const nodes = this.$refs.category.getCheckedNodes()
      const sourceList = []
      nodes.forEach(item => {
        sourceList.push(item.data)
      })
      this.datas.form.source_list = sourceList
    },
    // 数据来源改变
    handlerChangeSource(val) {
      if (val === 1) {
        this.setSourceIndex()
      } else {
        this.datas.form.source_list = []
      }
    },
    setSourceIndex() {
      if (this.$util.isUndef(this.datas.form.source_index)) {
        this.$set(this.datas.form, 'source_index', 0)
      }
      this.datas.form.source_index = Math.random()
    },
    // chooseImage() {
    //   this.chooseImageVisible = true
    // },
    // closeChooseImage() {
    //   this.chooseImageVisible = false
    // },
    // setCurrentItemAttach({ url, id }) {
    //   this.datas.form.advert_url = url
    //   this.datas.form.advert_icon_id = id
    // },
    chooseCourse() {
      this.chooseCourseVisible = true
    },
    setCurrentItemCourse(value, course) {
      const currentCourse = course.length > 0 ? course[0] : {}
      this.datas.form.advert_course_id = currentCourse.value
      this.datas.form.advert_course_title = currentCourse.title
      this.datas.form.advert_course_type = currentCourse.course_type
      this.chooseCourseVisible = false
    },
    handlerCategoryOptions(options) {
      if (Array.isArray(options)) {
        options.forEach(item => {
          item.disabled = item.children ? item.children.length < 0 : true
          if (item.children) {
            this.handlerCategoryOptions(item.children)
          }
        })
      }

      return options
    }
  }
}
</script>

<style scoped lang="scss">
.featured {
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 34px;

  &-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
    }

    .desc {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 16px;
    }
  }

  &-body {
    margin-top: 20px;

    .el-cascader {
      width: 100%;
    }
  }

  .advert-item__header {
    display: flex;
    align-items: center;

    .img-uploader {
      cursor: pointer;
      width: 167px;
      height: 62px;
      background: #f7f7f7;
      margin-right: 20px;
      overflow: hidden;
    }

    .img-uploader-card {
      //width: 167px;
      height: 62px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .img-uploader-btn {
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      line-height: 27px;
      text-align: center;
      width: 69px;
      height: 27px;
      border-radius: 15px;
      border: 1px solid #ffffff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .img-uploader-img {
      display: block;
      width: 210px;
      height: 81px;
    }

    .img-uploader-icon {
      font-size: 18px;
      color: #b5b5b6;
    }

    .img-uploader-text {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #b5b5b6;
      line-height: 14px;
    }

    .el-radio {
      padding: 5px 0;
    }
  }

  .advert-item__course {
    //margin-top: 10px;

    .course-add {
      display: flex;
      align-items: center;

      .text {
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        margin-right: 10px;
      }
    }

    .course-del {
      //margin-left: 66px;
      margin-top: 10px;
      display: flex;
      align-items: center;

      .text {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        font-weight: 400;
        color: #909399;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .close {
        font-size: 12px;
        color: #8c8c8c;
        cursor: pointer;
      }
    }
  }

  .advert-item__href {
    margin-top: 10px;
    display: flex;
    align-items: center;

    .text {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      margin-right: 10px;
    }

    .el-input {
      flex: 1;
    }
  }
}
</style>
